<template>
	<view class="warp">
		<view class="uni-margin-wrap">
			<view class="uni-item-view" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
				<view class="uni-item-view-base uni-item-view-top">
					<view class="uni-item-view-top-list" >
						<text class="text text1">客户投诉</text>
					</view>
					<view class="uni-item-view-top-list" >
						<image class="image" :src="'/static/mine/zx_status_title.png'"></image>
						<text class="text text2" v-if="item.c_status == 0">未处理</text>
						<text class="text text2" v-else-if="item.c_status == 0">处理中</text>
						<text class="text text2" v-else>已处理</text>
					</view>
				</view>
				<view class="uni-item-view-base uni-item-view-list" >
					<text class="text">{{item.content}}</text>
				</view>
				<view class="uni-item-view-base uni-item-view-bottom" >
					<text class="text">查看详情</text>
					<image class="image1" :src="'/static/mine/zx_xy_allow.png'"></image>
				</view>
			</view>
		</view>
		 <view v-if="list.length == 0 "><ns-empty :isIndex="false" text="暂无投诉"></ns-empty></view>
		  <loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			goDetail(e){
				this.$util.redirectTo('/pages/mine/tousu/tousu-detail/tousu-detail',{accident_id:e.id}); 
			},
			getData(){
				this.$refs.loadingCover.show();
				this.http.sendRequest({
					api: this.api.mine.mineComplaintListApi,
					data: {},
					success: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						if (res.success == 'true' && res.data) {
							this.list = res.data;
							// this.list =  this.list.concat(res.data);
						}
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.uni-item-view{
	width: 100%;
	margin-top: 16rpx;
	background-color: #fff;
	
	.uni-item-view-base{
		display:  flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 24rpx 16rpx 24rpx;
	}
	
	.uni-item-view-top{
		.uni-item-view-top-list{
			display: flex;
			align-items: center;
			
			.text{
				 font-size: 28rpx;
			}
			.text1{
				color:$uni-text-color-primary;
			}
			.text2{
				margin-left: 10rpx;
				color:$uni-text-color-org;
			}
		}
	}
	
	.uni-item-view-list{
		padding-top: 0rpx;
		padding-bottom: 0rpx;
		.text{
			font-size: 26rpx;
			color:$uni-text-color-5;
		} 
	}
	.uni-item-view-bottom{
		padding-bottom: 16rpx;
		.text{
			font-size: 24rpx;
			color:$uni-text-color-grey;
		}
	}
	
	.image{
		width: 36rpx;
		height: 36rpx;
	}
	.image1{
		width: 36rpx;
		height: 28rpx;
	}
}

</style>
